<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, type FormInstance } from "element-plus";
import Children from "@/page/about/children.vue";

// 轮播图数据
const pictures = ref([
  'src/assets/img/1-1.jpg',
  'src/assets/img/1-2.jpg',
  'src/assets/img/1-3.png',
  'src/assets/img/1-4.png',
]);

// 弹框控制
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();

// 表单数据模型
const formModel = reactive({
  name: "",
  phone: "",
  gender: "male",
  interests: [] as string[]
});

// 表格数据
const tableData = reactive([
  { id: 1, name: "karry", age: 25, gender: "男" },
  { id: 2, name: "roy", age: 24, gender: "男" },
  { id: 3, name: "jackson", age: 24, gender: "男" }
]);


// 打开弹窗
function openDialog() {
  dialogVisible.value = true;
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false;
  ElMessage.success("弹窗已关闭");
}

// 提交表单
function submitForm() {
  formRef.value?.validate(valid => {
    if (valid) {
      ElMessage.success("表单提交成功！");
      console.log("表单数据:", formModel);
      dialogVisible.value = false;
    } else {
      ElMessage.warning("请填写必填项");
    }
  });
}

// 重置表单
function resetForm() {
  formRef.value?.resetFields();
}

// 子组件相关
const name = ref('Karry');
const age = ref(25);
const item = reactive({
  gender: '男',
  sn: '19990921'
});

function onsuccess(value: any) {
  console.log('收到子组件事件:', value);
}
</script>

<template>
  <div class="page-container">
    <h2></h2>

    <!-- 轮播图 -->
    <el-carousel height="300px" class="carousel-container">
      <el-carousel-item v-for="(img, index) in pictures" :key="index">
        <el-image :src="img" fit="cover" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <el-button type="primary" @click="openDialog">打开表单</el-button>


    <Children
      :name="name"
      :age="age"
      :item="item"
      @custom-event="onsuccess"
      class="children-component"
    />

    <!-- 表格展示 -->
    <el-table :data="tableData" stripe class="data-table">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="gender" label="性别" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="console.log(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="用户信息表单"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formModel"
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formModel.name" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="formModel.email" placeholder="请输入电话" />
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="formModel.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-container {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.carousel-image {
  width: 100%;
  height: 100%;
  display: block;
}

.data-table {
  margin-top: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.children-component {
  margin: 20px 0;
}
</style>
